Web font comparisons: variable vs. static 可變字型 vs. 靜態字型：網頁字型的效能對比
透過一組測試資料，分析了不同字型組合（Type Palette）在靜態字型和可變字型情況下的檔案大小、載入時間和效能最佳化情況。
可變字型 vs.靜態字型哪種更快？
測試方法：
- 採用了一款標準無襯線字型（HEX Franklin），包含約 325 個字元。
- 靜態字型採用 CFF 格式，可變字型採用 TTF 格式（CFF 版可變字型更小，但瀏覽器支援度較低）。
- 所有字型均使用 WOFF2 格式進行壓縮，以確保測試結果符合現代網頁字型標準。
- 網路載入速度假設：500 kB/秒的傳輸速率，每個額外的字型檔案增加 0.1 秒的延遲。
測試結果：可變字型的優勢有多大？
| 字型組合 | 靜態字型檔案數 | 可變字型檔案數 | 減少的檔案數 | 減少的檔案大小 | 載入時間縮短 |
| 組合 1（2 種字重） | 2 | 1 | 50% | 減少 37% | 減少 47% |
| 組合 2（3 種字重） | 3 | 1 | 67% | 減少 59% | 減少 65% |
| 組合 3（4 種字重，含壓縮字型） | 4 | 1 | 75% | 減少 69% | 減少 74% |
| 組合 4（5 種字重，含壓縮字型） | 5 | 1 | 80% | 減少 55% | 減少 74% |
| 組合 5（7 種字重，含壓縮字型） | 7 | 1 | 86% | 減少 69% | 減少 82% |
結論：可變字型顯著提升網頁效能
- 減少檔案數量：在需要多個字重和字寬的情況下，可變字型可以用一個檔案替代多個靜態字型檔案，減少 50%-86% 的 HTTP 請求。
- 降低檔案大小：可變字型相比靜態字型，檔案大小減少 37%-69%，節省頻寬，提升網頁載入速度。
- 加快網頁載入時間：在複雜的字型組合下（比如組合 5），可變字型比靜態字型載入快 82%。